import React from 'react';
import { Link as RouterLink } from 'react-router-dom'
import { withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import SvgIcon from '@material-ui/core/SvgIcon';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import Skeleton from '@material-ui/lab/Skeleton';
import Chip from '@material-ui/core/Chip'
import Divider from '@material-ui/core/Divider';
import Badge from '@material-ui/core/Badge'

import PersonIcon from '@material-ui/icons/Person';
import AccessTimeIcon from '@material-ui/icons/AccessTime';
import FavoriteIcon from '@material-ui/icons/Favorite';
import CategoryIcon from '@material-ui/icons/Category';
import RemoveRedEyeIcon from '@material-ui/icons/RemoveRedEye';

const styles = theme => ({
  root: {
    maxWidth: 345,
  },
  media: {
    height: 140,
  },
  description: {
    lineClamp: 3,
    textOverflow: "ellipsis",
    display: "-webkit-box",
    "-webkit-box-orient": "vertical",
    overflow: "hidden",
  },
  infoContent: {
    padding: theme.spacing(0),
    display: "flex",
    justifyContent: "space-evenly",
    alignItems: "center",
  },
  infoChip: {
    margin: theme.spacing(1, 0, 1, 0),
  }
});

class BlogCard extends React.Component {

  formatTime(time) {
    return time.split(' ')[0];
  }

  clickChip(event) {
    event.preventDefault();
  }

  renderMainContent() {
    const { classes } = this.props;
    const blogDetailUrl = `/blog/${this.props.id}`;
    return (
      <CardActionArea component={RouterLink} to={blogDetailUrl}>
        {
          this.props.cover_picture ? (<CardMedia
            component="img"
            className={classes.media}
            src={this.props.cover_picture}
            title={this.props.title}
          />) : (<Skeleton variant="rect" height={140} animation="wave" />)
        }
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {this.props.title}
          </Typography>
          <Typography
            className={classes.description}
            variant="body2"
            color="textSecondary"
            component="p">
            {this.props.description ?
              this.props.description : this.props.content.slice(0, 70)}
          </Typography>
        </CardContent>
      </CardActionArea>
    );
  }

  /**
   * 获取文章的信息：作者 创作时间等
   */
  renderInfoChip() {
    const { classes, page_view } = this.props;
    const clickNum = page_view ? page_view.click_num : 0;
    const validClickNum = page_view ? page_view.valid_click_num : 0;
    return (
      <React.Fragment>
        <div className={classes.infoContent}>
          <Chip
            className={classes.infoChip}
            variant="outlined"
            color="primary"
            clickable
            icon={<CategoryIcon />}
            label={this.props.category.name}
          />
          <Badge badgeContent={validClickNum} max={999} showZero color="secondary">
            <RemoveRedEyeIcon />
          </Badge>
          <Badge badgeContent={clickNum} max={999} showZero color="secondary">
            <SvgIcon viewBox="0 0 1024 1024">
            <path d="M458.286 421.32l86.542 501.754c0 0 63.958-65.842 116.759-111.792l116.1 155.425c4.677 6.317 14.86 6.729 22.641 1.038l49.574-36.225c7.821-5.715 10.369-15.481 5.647-21.796l-112.93-151.18c58.99-23.786 156.15-50.855 156.15-50.855l-440.481-286.368zM318.59 653.020l-128.849 94.176c-19.478 14.262-22.995 41.686-7.578 62.013 15.422 20.269 43.885 25.605 63.299 11.406l128.849-94.176c19.915-14.574 23.243-43.157 7.826-63.421-15.359-20.306-43.655-24.572-63.547-9.998v0zM926.736 264.799c-15.422-20.262-43.264-24.818-63.61-9.961l-127.937 93.581c-20.326 14.86-23.843 42.37-8.447 62.635 15.422 20.262 43.878 25.605 64.207 10.746l127.941-93.581c20.347-14.863 23.243-43.138 7.845-63.42v0zM328.958 167.95c-15.106-19.853-42.905-24.407-63.295-9.523-19.066 13.951-22.995 41.686-7.888 61.537l100.081 131.623c15.111 19.91 43.322 24.091 62.383 10.139 20.326-14.86 23.913-42.308 8.8-62.197l-100.081-131.58zM581.667 324.348c24.818 4.017 47.648-12.691 50.855-37.199l20.080-159.13c3.206-24.464-14.198-47.396-39.392-51.826-24.814-4.017-47.644 12.686-50.855 37.132l-20.138 159.194c-3.105 24.508 14.322 47.402 39.451 51.83v0zM338.854 501.924c2.421-24.573-14.985-47.465-39.387-51.831l-161.245-26.512c-25.664-3.396-48.062 12.978-50.857 37.195-3.7 25.541 13.725 48.435 39.392 51.826l161.241 26.518c24.383 4.24 46.838-12.153 50.855-37.194v0zM338.854 501.924z" p-id="1341"></path>
            </SvgIcon>
          </Badge>
        </div>
        <div className={classes.infoContent}>
          <Chip
            className={classes.infoChip}
            color="primary"
            clickable
            icon={<PersonIcon />}
            label={this.props.author.nickname}
          />
          <Chip
            className={classes.infoChip}
            variant="outlined"
            color="primary"
            clickable
            icon={<AccessTimeIcon />}
            label={this.formatTime(this.props.create_time)}
          />
        </div>
      </React.Fragment>

    );
  }

  render() {
    const { classes } = this.props;
    const blogDetailUrl = `/blog/${this.props.id}`;
    return (
      <Card className={classes.root} raised={true}>
        {this.renderMainContent()}
        <Divider />
        {this.renderInfoChip()}
        {/* <CardActions>
        </CardActions> */}
      </Card>
    );
  }
}

export default withStyles(styles, { withTheme: true })(BlogCard);